<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="我的简历"
        right-text="预览"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </van-sticky>

    <div>
      <van-cell-group>
        <van-cell to="/compilation">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title style="alignitems: center">
            <div>
              <div class="name">
                {{ username }}
                <van-icon size="20" name="edit" />
              </div>
              <span class="custom-title">{{ schoolname }} --</span>
              <span class="custom-title">{{ education }}</span>
            </div>
          </template>
          <template #default>
            <div>
              <img
                class="cell"
                style="width: 70px; verticalalign: middle"
                src="../1.png"
                alt=""
              />
            </div>
          </template>
        </van-cell>

        <!-- 个人优势 -->
          <van-cell to="/index/ownadv">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title style="align-items: center">
              <div>
                <div class="name1">个人优势</div>
                <div class="van-multi-ellipsis--l2">
                  {{ text }}
                </div>
              </div>
            </template>
            <template #right-icon>
              <van-icon size="20" name="edit"> </van-icon>
            </template>
          </van-cell>
        <!-- 求职期望 -->
        <van-cell to="/index/jobwant">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title style="align-items: center">
            <div>
              <div class="name1">求职期望</div>
              <div>
                <span>{{ position }} {{ salary }}</span>
              </div>
            </div>
          </template>
          <template #right-icon>
            <van-icon size="20" name="arrow" />
          </template>
        </van-cell>
        <van-cell>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title style="alignitems: center">
            <div>
              <div class="name1">项目经历</div>
              <!-- <span class="custom-title">1.熟悉掌握html</span> -->
            </div>
          </template>
          <template #right-icon>
            <van-icon style="lineheight: 40px" size="20" name="add-o" />
          </template>
        </van-cell>

        <van-cell>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title style="alignitems: center">
            <div>
              <div class="name1">工作经历</div>
              <!-- <span class="custom-title">1.熟悉掌握html</span> -->
            </div>
          </template>
          <template #right-icon>
            <van-icon style="lineheight: 40px" size="20" name="add-o" />
          </template>
        </van-cell>

        <van-cell to="/index/education">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title style="alignitems: center">
            <div>
              <div class="name1">教育经历</div>
              <div>
                <span class="custom-title">{{ schoolname }} ——</span>
                <span class="custom-title">{{ education }} ——</span>
                <span class="custom-title">{{ major }}</span>
              </div>
            </div>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      schoolname: "",
      position: "",
      salary: "",
      text: "",
      username: "",
      education: "",
      major: "",
    };
  },
  mounted() {
    this.user_id = localStorage.getItem("userId");
    this.axios({
      method: "post",
      url: "http://localhost:3000/sel_resume",
      data: {
        user_id: this.user_id,
      },
    }).then((res) => {
      let data = res.data.data[0];
      // console.log(data);
      (this.schoolname = data.jl_school),
        (this.position = data.jl_position),
        (this.salary = data.jl_salary),
        (this.text = data.jl_describe),
        (this.username = data.jl_name),
        (this.education = data.jl_education),
        (this.major = data.jl_major);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/show");
    },
  },
};
</script>


<style scoped>
/deep/.van-nav-bar__text {
  color: black;
}
/deep/.van-nav-bar__arrow {
  color: black;
}
.van-cell {
  line-height: 40px;

  border-bottom: 1px solid #eee;
}

.name {
  font-size: 25px;
  font-weight: bold;
}
.name1 {
  font-size: 16px;
  font-weight: bold;
}
.custom-title {
  font-weight: bold;
  margin-right: 4px;
  vertical-align: middle;
}
.cell {
  border-radius: 50%;
}
</style>